<template>
  <div id="app">
    <audio controls ref="audio" class="aud" v-show="false">
      <source src="./assets/4950.mp3" />
    </audio>
    <el-config-provider :locale="zh">
      <router-view />
    </el-config-provider>
  </div>
</template>

<script setup>
import useSettingsStore from "@/store/modules/settings";
import { ElMessage, ElMessageBox } from "element-plus";

import { handleThemeStyle } from "@/utils/theme";
import { reactive, getCurrentInstance } from "vue";
// import webSocket from "./utils/webSocket/index";
import useUserStore from "@/store/modules/user";

import { useDark, useToggle } from "@vueuse/core";
const route = useRoute();
const audio = ref(null);
const useUser = useUserStore();
const { proxy } = getCurrentInstance();

const socket = ref();
// console.log(
//   '%c                   _oo0oo_                     \n' +
//     '                  o8888888o										\n' +
//     '                  88" . "88										\n' +
//     '                  (| -_- |)										\n' +
//     '                   O\\ = /O										\n' +
//     "               ____/`---'\\____									\n" +
//     "             .   ' \\\\| |// `.									\n" +
//     '              / \\\\||| : |||// \\								\n' +
//     '           / _||||| -卍- |||||- \\								\n' +
//     '              | | \\\\\\ - /// | |								\n' +
//     "            | \\_| ''\\---/'' | |								\n" +
//     '             \\ .-\\__ `-` ___/-. /							\n' +
//     "          ___`. .' /--.--\\ `. . __							\n" +
//     '       ."" "< `.___\\_<|>_/___. ` >" "".        \n' +
//     '      | | : `- \\`.;`\\ _ /`;.`/ - ` : | |       \n' +
//     '        \\ \\ `-. \\_ __\\ /__ _/ .-` / /          \n' +
//     "======`-.____`-.___\\_____/___.-`____.-'======  \n" +
//     "                   `=---='                     \n" +
//     '.............................................  \n\t\t' +
//     '佛祖镇楼                  BUG辟易                          \n\t' +
//     '佛曰:\n\t\t' +
//     '写字楼里写字间，写字间里程序员；\n\t\t' +
//     '程序人员写程序，又拿程序换酒钱。\n\t\t' +
//     '酒醒只在网上坐，酒醉还来网下眠；\n\t\t' +
//     '酒醉酒醒日复日，网上网下年复年。\n\t\t' +
//     '但愿老死电脑间，不愿鞠躬老板前；\n\t\t' +
//     '奔驰宝马贵者趣，公交自行程序员。\n\t\t' +
//     '别人笑我忒疯癫，我笑自己命太贱；\n\t\t' +
//     '不见满街漂亮妹，哪个归得程序员？\n\t\t' +
//     '希望看到这段打印的你，也会心有所成！',
//   'color:#fa4345;text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 1px 0 #bbb;font-size:20px'
// )

onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme);
  });
});

// 监听是否已登录 登录后 启用websocket
watch(
  () => useUser.userId,
  (val) => {
    // socket.value = webSocket.initWebSocket();
    if (val) {
      // 启用打印服务连接
      // printV1Store().initPrintSocket();
      if (sessionStorage.getItem("socket") == 1) {
        // socket.value = webSocket.initWebSocket();

        return;
      }
    } else {
      // socket.value.close();

      console.log("关闭连接");
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style lang="scss">
@import "https://at.alicdn.com/t/c/font_3742145_9yuqtyvbdpv.css";

// 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
::-webkit-scrollbar {
  width: 5px;
  height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
  border-radius: 10px;
}

// 滑块
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #adadaba4;
  // height: 50px; // 整体设了宽高后，这里宽高是无效的
  // width: 50px;
}

// 轨道
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #fff;
}

.el-link {
  margin-right: 8px;
}

/* app.css */
.icon-custom {
  /* 定义一个公共的类名 */
  border-radius: 50%;
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-custom.lindaidai-task {
  /* 加上背景图 */
  background-image: url("https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/rules.png");
}

/* .pagination {
  width: 80%;
  position: fixed;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
} */
#app ::v-deep .el-form-item {
  width: 228px;
}

.title {
  font-weight: 700;
  font-size: 16px;
  margin: 5px;
}

.Btn {
  float: right;
  margin-top: 10px;
  min-width: 160px;
}

// .app-container ::v-deep .el-form-item__content {
//   width: 228px;
// }

/* 备注样式 */
.remarkLabel {
  display: inline-block;
  text-align: right;
  width: 80px;
  box-sizing: border-box;
  padding: 0 12px 0 0;
  font-weight: 700;
  flex: 0 0 auto;
}

.app-container {
  width: 100%;
}

.groupClass {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: #ffffff;
}

.groupClass_av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: #409eff;
}

// .app-container ::v-deep .el-input__inner {
//   width: 120px !important;
// }
// .app-container ::v-deep .el-input {
//   width: 120px !important;
// }
</style>
